“Hello, New Relic!” 基礎中の基礎が学べるハンズオンをやってみた #newrelic
本記事は New Relic Advent Calendar 2021 の 17 日目の記事です。
New Relic が公開しているトレーニングサイト、New Relic University (NRU) には、ウェビナーやハンズオンなど多くのコンテンツが収められています。
その中で今回、「New Relic 最初の一歩」ともいえそうなハンズオン「Hello, New Relic!」をやってみたので、その冒頭部分だけレポートします。
何が学べる？
「Hello, New Relic!」は以下の 5 つの Lab で構成されていて、New Relic の基本を順に学んでいくことができます。
- Lab 1: Instrumenting with Agents
- ハンズオン環境（EC サイトのテストアプリ）を Glitch.com 上に立ち上げ、New Relic APM と Browser (RUM) を組み込む
- Lab 2: Exploring Your Data with NRQL
- 上記アプリから収集されたデータを NRQL（検索言語）を使って検索、ダッシュボード作成
- Lab 3: Custom Instrumentation
- ビジネス KPI などのカスタムメトリクスを組み込み可視化
- Lab 4: Alerting Best Practices
- SLO ダッシュボードを作成しアラートを仕込む
- Lab 5: True Availability Using Synthetics
- 「料理の注文をする」という一連の流れを Synthetics で監視
いわゆる「Hello World」が APM、というところに、New Relic の本質が出ていますね！
インフラエンジニア出身の身としては、つい「New Relic Infrastructure を設定してメトリックを〜」と考えてしまいがちなので、アプリケーション中心のハンズオンは助かります。
ちなみに本ハンズオン（というか NRU 全体）は英語のみのコンテンツなのですが、あまり難しい言い回しなどは出てこないのと、動画と文章の両方で手順を説明してくれるので、Google 翻訳や DeepL などの翻訳アプリ片手に進めていけるかと思います。
実行環境：Glitch.com
上述していますが、このハンズオンは Glitch 上で実行します。
ぼくはこのサービスの存在をこれで知ったのですが、オンライン IDE と実行環境が無料でも使えてしまうという、とても素敵なサービスでした。
ただし、無料アカウント（Free プラン）では以下の制限があります。とはいえハンズオン環境としては十分以上ですね！
- プロジェクトとそのコードは public 状態で、誰でも検索可能
- その場合でも一部、API キーなどの機密情報などが記述できるファイルは非公開
- Web アプリケーションは実行後 5 分でスリープされる
- 静的コンテンツは常時アクセス可能
準備
ハンズオンを開始する前に、以下の二つのアカウントを準備しておきましょう。まだ持っていなければ、両方とも無料で開始できます。
- Glitch
- New Relic
Glitch ですが、Firefox ではコンテクストメニューが表示されないなど不安定なところが見られたので、Chrome ブラウザを使うとよさそうです。1
また、New Relic の API キー（ライセンスキー）も必要になりますので、以下のドキュメントを参照しつつ用意しておきましょう。Lab 1 の動画でも手順が説明されています。
ちなみに、New Relic University は New Relic アカウントでサインインが可能です。
サインインしておくと履歴が残り、あとから何を受講したか分かる様になるため、ハンズオンを始める前にやっておきましょう。
Lab 1: Instrumenting with Agents
では実際に手順を進んでいきたいと思います。 Lab 1 は、以下のステップに分かれています（以後も似たような感じで進んでいきます）。
- 動画を見る
- LAB 1: FoodMe を実行
- LAB 2: Deploying the Browser Agent を実行
Lab の中に LAB があるの、ちょっと分かりにくいですね！
でも慣れれば大したことはないので、そういうものということでそのまま進んでいきましょう。
ちなみに Lab のほうは Lesson と呼ばれていることもあるので、この二つは単なる表記揺れという理解でいいと思います。
LAB 1: FoodMe App
LAB 1 の手順は以下のとおりです：
- Glitch のアカウントを用意（済み）
- 用意した Glitch アカウントにテストアプリのコード群を複製
- コード内のファイル
.envを編集して New Relic ライセンスキーを埋め込む - ファイル
package.jsonを修正し New Relic 上で参照するアプリケーション名（FoodMe）をセット - テストアプリにブラウザでアクセス
- テストアプリを操作してみる --> 計測データが New Relic に送信されることを確認
2.については、手順に記載されている URL を踏むことで自動的に clone されます。適当なプロジェクト名が自動的に付けられるので、一瞬分からなくなりますが、そういうものと思ってください。
もちろん後から変更が可能ですが、既に Glitch 上に存在している名前と重複はできない仕様みたいです。
プロジェクトを開くとこんな感じで、実際の実行画面を右側で見つつ、左側でコードをいじることが可能です。
さっそく.envファイルを修正し、ライセンスキーを書き込んでみましょう（ステップ 3.）。
ちなみに前述しましたが、このファイルに書き込まれたデータは非公開となるのでご安心ください。
4.は、見たところ既に FoodMe に書き換わっているのでそのまま手を付けず。Glitch の右側に表示されている FoodMe の画面で、適当に注文してみます。
最終的に「Purchase」をクリックしたら、New Relic の画面の方を見てみましょう。
何かしらデータが飛んできてますね！
現時点で、FoodMe アプリのサーバアプリケーション側の動作が New Relic で追えるようになっているはずです。2
LAB 2: Deploying the Browser Agent
このままいろいろ見て回ってもいいんですが、途中なので先に進みましょう。続いて LAB 2 に進みます。
手順に従ってリアルユーザーモニタリング（RUM）のための Browser Agent （JavaScript スニペット）を仕込みましょう。これで、購入者のブラウザで動作している JavaScript の動作も併せて追えるようになるはずです。
+ Add more data をクリックし、 Browser metrics > New relic Browserをクリックし、プルダウンメニューで New Relic のアカウントを選択します。
動画とはちょっと UI が変わっているのですが、まず「Copy/Paste Javascript code」ラジオボタンを選択し、
Name your app で Yes. を選択し、 FoodMe を選択して Enable をクリックします。
JavaScript スニペットが生成されるので、それをまるごとコピーし、Glitch に戻って、app/index.htmlの 6 行目（空行になっているところ）に貼り付けます。
そしたらまた、FoodMe アプリで何か注文してみましょう。
Browser でもデータが取れていることが分かりますね！
この後は？
取りあえず何度かトラフィックを生成して（ = FoodMe で買い物してみて）データを貯めた後、New Relic の画面をいろいろと見て回ってください。 APM と Browser は互いに「同じアプリ」としてリンクされているので、データを統合的に観測できることがわかると思います。
その後ハンズオンの Lab 2, Lab 3 ... と進んでいくことで、以下を習得できます。ここから先は是非ご自分で手を動かしてみてください！
- NRQL を使ってデータを縦横無尽に検索する
- コード内で任意のメトリクス（custom data）を New Relic へ送信する方法
- NRQL を使って SLO を計測しアラートを設定
- Synthetics 監視を設定し、EC サイトの注文手順を定期的に実行し観測する
まとめ
New Relic の基本を学べる NRU ハンズオン "Hello, New Relic!" をやってみました。
手順もさることながら、予め New Relic が半分組み込まれた状態のコードが見られたり動かせたりするのは、初学者としてはうれしいのではないでしょうか。
NRU には他にも様々なコンテンツがありますので、この年末で時間に余裕のある方は、この機会に是非やってみてください！
